<template>
  <el-dialog
    :close-on-click-modal="false"
    title="不良记录详情"
    :footer="null"
    width="900px"
    :visible.sync="visible"
    @cancel="handleCancel"
  >
    <el-form class="detail-form" :model="form" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item class="width-item" label="不良类型:">
            <span>{{ judgeType(detailObj.badType) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发生日期:">
            <span>{{ detailObj.badDate }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="供应商:">
        <span>{{ detailObj.supplierName }}</span>
      </el-form-item>
      <el-form-item label="对应关系人列表:">
        <span>{{ handleData(detailObj.linkmanList) }}</span>
      </el-form-item>

      <el-form-item label="事件描述:">
        <span>{{ detailObj.badContent }}</span>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item class="width-item" label="创建人:">
            <span>{{ detailObj.createUser }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间:">
            <span>{{ formatTime(detailObj.createTime) }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="处置结果:">
        <span>{{ detailObj.handleStateName }}</span>
      </el-form-item>
      <el-form-item label="处置说明:">
        <span>{{ detailObj.handleContent }}</span>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item class="width-item" label="处置人:">
            <span>{{ detailObj.handleUser }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="处置时间:">
            <span>{{ detailObj.handleTime ? formatTime(detailObj.handleTime) : null }}</span>
          </el-form-item>
        </el-col>
        <el-col v-if="detailObj.savePath && detailObj.savePath.length > 0">
          <el-form-item label="附件:">
            <p class="mb10" v-for="(item,index) in detailObj.savePath" :key="index">
              <a :href="item.savePath">{{ '附件' + Number(index+1) }}</a>
            </p>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider />
    <div class="tl-center">
      <el-button size="large" @click="handlePrint">打印</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { badDetail } from '@/api/supplier'
import { openNotification, getDicData } from '@/utils/util'

export default {
  data() {
    return {
      visible: false,
      form: {},
      detailObj: {},
      badTypeArr: []
    }
  },
  mounted() {
    this.badTypeArr = getDicData('002', '002006')
  },
  methods: {
    judgeType(key) {
      let str = ''
      this.badTypeArr.map(v => {
        if (v.key === key) {
          str = v.title
        }
      })
      return str
    },
    async edit(record) {
      console.log('edit', record)
      this.detailObj = Object.assign({}, record)
      this.visible = true
    },
    // 打印事件处理
    handlePrint() {
      console.log('打印')
    },
    handleCancel() {
      this.visible = false
    },
    // 处理联系人列表的JSON数据
    handleData(str) {
      if (str && str !== '[]') {
        const arr = JSON.parse(str)
        let arr1 = []
        arr.map(v => {
          arr1.push(v.linkmanName)
        })
        return arr1.join('、')
      }
    }
  }
}
</script>

<style scoped>
.detail-form >>> .ant-form-item {
  margin-bottom: 10px;
}
.detail-form >>> .width-item .ant-form-item-label {
  width: 177px;
}
.detail-form >>> .width-item .ant-form-item-control-wrapper {
  width: 200px;
}
</style>
